<template>
  <div class="home">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <el-container class="container-bg">
      <el-header>
        <el-row class="haader-row">
          <el-col :span="2"><div class="grid-content bg-purple title border">客流监测</div></el-col>
          <el-col :span="2"><div class="grid-content bg-purple title border">产业监测</div></el-col>
          <el-col :span="2"><div class="grid-content bg-purple title border">游客画像</div></el-col>
          <el-col :span="2"><div class="grid-content bg-purple title">自驾分析</div></el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light title ">
              <img class="bigTitle" src="../../static/image/title.png" alt="宁海旅游大数据分析系统">
            </div></el-col>
          <el-col :span="2"><div class="grid-content bg-purple title border">精品路线</div></el-col>
          <el-col :span="2"><div class="grid-content bg-purple title border">营销决策</div></el-col>
          <el-col :span="2"><div class="grid-content bg-purple title border">舆情分析</div></el-col>
          <el-col :span="2"><div class="grid-content bg-purple title">景区监控</div></el-col>
        </el-row>
      </el-header>
      <el-main>
        <!-- 分为左6中10右6三部分 -->
        <el-row class="main-row">
          <el-col :span="6"><div class="grid-content bg-purple left">左</div></el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple middle">
              <img class="middle-img" src="../../static/image/center-bg.png" alt="数据统计">
              <!-- （3个循环）轮播效果 -->
              <md-lunbo></md-lunbo>
            </div>
          </el-col>
          <el-col :span="6"><div class="grid-content bg-purple right">右</div></el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as d3 from 'd3';
import mySvg from '@/components/svg/MySvg.vue'
import mdLunbo from '@/components/mdLunbo/mdLunbo.vue'
export default {
  name:'Home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      text:'jieshou'
    }
  },
  created(){
   
    
  },
  beforeMount(){
    
  },

  mounted(){
    
  },
  beforeUpdate(){

  },
  updated(){

  },
  beforeDestroy(){

  },
  destroyed(){

  },
  methods:{
     
  },
  components:{
     mySvg,
     mdLunbo
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-table{
  border: none;
}
.el-table__body-wrapper{
  border: none;
}
.el-table td{
  border: none;
}
</style>

<style scoped>
.home{
  margin: 0px;
  min-width: 1300px;
  background-color: #192738;
}
.haader-row{
  padding: 0;
  height: 30px;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.title{
  color: white;
  font-size: 1.1rem;
}
.border{
  border-right: 1px #0f4f66 solid;
}
.container-bg{
  background-color:transparent;
}
.bigTitle{
  width: 96%;
  overflow: visible !important;
}
.main-row{
  color: white;
  margin-top: -10px;
  overflow: visible !important;
}
.left{
  background-color: red;
}
.middle{
  position: relative;
}
.middle-img{
  width: 100%;
  display: -webkit-inline-box;
  position: relative;
   
}
.right{
  background-color: palevioletred;
}
</style>

